<template>
  <view class="login-container">
    <view class="login-header" :style="{paddingTop: barHeight + 'px'}">
      <view class="header-view">
        <view class="" @click="$u.route({type: 'back', delta: 1})">
          <u-icon name="close" size="32"></u-icon>
        </view>
        <view class="" style="opacity: 0;">

        </view>
      </view>
      <view class="logo">
        <image class="img" src="/static/images/login/welcome.png" mode="widthFix"></image>
      </view>
    </view>

    <view class="login-cont">
      <view class="login-view">
        <view class="u-f-ajc big_title">找回密码</view>
        <view class="form-view" v-if="step === 1">
          <u-form :model="validAccountForm" ref="validAccountForm">
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/name.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="validAccountForm.account" placeholder="请输入账户名" />
            </u-form-item>
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/code.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="validAccountForm.img_code" placeholder="请输入图片验证码" maxlength="4" />
              <u-image slot="right" width="120" height="60" :src="captcha_url"
                @click="handleChangeCaptchalUrl"></u-image>
            </u-form-item>
          </u-form>
          <!-- <u-button :disabled="val_disabled_account" class="u-m-20" type="error" shape="circle"
            @click="handleValidAccount">验证账户</u-button> -->
          <view class="recharge_btn u-f-ajc" :disabled="val_disabled_account" @click="handleValidAccount">
            验证账户
          </view>
        </view>
        <view class="form-view" v-if="step === 2">
          <u-form :model="validMobileForm" ref="validMobileForm">
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/name.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="validMobileForm.mobile" disabled maxlength="11" />
            </u-form-item>
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/code.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="validMobileForm.img_code" placeholder="请输入图片验证码" maxlength="4" />
              <u-image slot="right" width="120" height="60" :src="captcha_url"
                @click="handleChangeCaptchalUrl"></u-image>
            </u-form-item>
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/pwd.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="validMobileForm.sms_code" placeholder="请输入短信验证码" maxlength="6" />
              <!-- <u-button slot="right" type="error" size="mini" @click="handleCode">{{codeTips}}</u-button> -->
              <view class="login_type" @click="handleCode">{{codeTips}}</view>
              <u-verification-code seconds="60" ref="uCode" @change="handleCodeChange"></u-verification-code>
            </u-form-item>
          </u-form>
          <!-- <u-button :disabled="val_disabled_mobile" class="u-m-20" type="error" shape="circle"
            @click="handleNextStep">下一步</u-button> -->
          <view class="recharge_btn u-f-ajc" :disabled="val_disabled_mobile" @click="handleNextStep">
            下一步
          </view>
        </view>
        <view class="form-view" v-if="step === 3">
          <u-form :model="changePasswordForm" ref="changePasswordForm">
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/pwd.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="changePasswordForm.password" type="password" placeholder="请输入密码" maxlength="20" />
            </u-form-item>
            <u-form-item label-position="top" :border-bottom="false">
              <image src="/static/images/login/pwd.png" class="form_icon" mode="widthFix"></image>
              <u-input v-model="changePasswordForm.rep_password" type="password" placeholder="请确认密码" maxlength="20" />
            </u-form-item>
          </u-form>
          <!-- <u-button :disabled="val_disabled_password" class="u-m-20" type="error" shape="circle"
            @click="submitChangeForm">确认修改</u-button> -->
          <view class="recharge_btn u-f-ajc" :disabled="val_disabled_password" @click="submitChangeForm">
            确认修改
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import * as API_Common from '@/api/common.js';
  import * as API_Passport from '@/api/passport.js';
  import Cache, {
    Keys
  } from '@/utils/cache.js';
  export default {
    data() {
      return {
        uuid: Cache.getItem('uuid'),
        step: 1,

        // #ifdef MP
        barHeight: this.customBar, //状态栏+导航栏高度
        // #endif
        // #ifdef APP-PLUS || H5
        barHeight: this.statusBar, //状态栏高度
        // #endif
        
        validAccountForm: {
          account: '',
          img_code: ''
        }, // 校验账户信息 表单
        validMobileForm: {
          mobile: '',
          img_code: '',
          sms_code: ''
        }, //校验手机 表单
        changePasswordForm: {
          password: '',
          rep_password: ''
        }, //修改密码 表单
        captcha_url: '', //图片验证码
        codeTips: '获取验证码'
      };
    },
    computed: {
      // 验证账户按钮 按钮是否禁用
      val_disabled_account() {
        const {
          account,
          img_code
        } = this.validAccountForm
        return !(account && img_code)
      },
      // 验证手机号 按钮是否禁用
      val_disabled_mobile() {
        const {
          img_code,
          sms_code
        } = this.validMobileForm
        return !(img_code && sms_code)
      },
      // 确认修改密码 按钮是否禁用
      val_disabled_password() {
        const {
          password,
          rep_password
        } = this.changePasswordForm
        return (!password || !rep_password) || (password !== rep_password)
      }
    },
    onLoad() {
      this.handleChangeCaptchalUrl()
    },
    methods: {
      // 获取图片验证码
      handleChangeCaptchalUrl() {
        const uuid = this.step === 1 ? this.uuid : this.validMobileForm.uuid
        this.captcha_url = API_Common.getValidateCodeUrl(uuid, 'FIND_PASSWORD')
      },
      // 验证账户
      handleValidAccount() {
        const {
          uuid
        } = this
        const {
          account,
          img_code
        } = this.validAccountForm
        API_Passport.validAccount(uuid, img_code, account, 'FIND_PASSWORD').then((response) => {
          this.validMobileForm.mobile = response.mobile
          this.validMobileForm.uname = response.uname
          this.validMobileForm.uuid = response.uuid
          this.step = 2
          this.handleChangeCaptchalUrl()
        }).catch(this.handleChangeCaptchalUrl)
      },
      // 获取短信验证码
      handleCode() {
        const {
          uuid,
          img_code
        } = this.validMobileForm
        if (!img_code) {
          this.$u.toast('请输入图片验证码')
          return
        } else {
          if (this.$refs.uCode.canGetCode) {
            // 向后端请求验证码
            API_Passport.sendFindPasswordSms(uuid, img_code, 'FIND_PASSWORD').then(res => {
              this.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            }).catch(this.handleChangeCaptchalUrl)
          } else {
            this.$u.toast('倒计时结束后再发送')
          }
        }
      },
      //验证码发生变化时
      handleCodeChange(text) {
        this.codeTips = text;
      },
      //下一步 验证短信验证码
      handleNextStep() {
        const {
          uuid,
          sms_code
        } = this.validMobileForm
        API_Passport.validFindPasswordSms(uuid, sms_code).then(() => {
          this.step = 3
          this.handleChangeCaptchalUrl()
        }).catch(this.handleChangeCaptchalUrl)
      },
      //找回密码
      submitChangeForm() {
        const {
          uuid
        } = this.validMobileForm
        const {
          password
        } = this.changePasswordForm
        API_Passport.changePassword(uuid, password).then(() => {
          this.$u.toast('密码找回成功，请牢记您的新密码')
          uni.navigateBack()
        }).catch(this.handleChangeCaptchalUrl)
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/login/bg.png) no-repeat 0 0;
    background-size: 100% 500rpx;
  }

  .login-container {
    background-color: rgba(0, 0, 0, 0);

    .login-header {
      // background-image: url(../../static/images/bg/bg5.png);
      // background-size: 100% 100%;
      color: #FFFFFF;
      padding: 30rpx;
      height: 457rpx;
      background-color: rgba(0, 0, 0, 0);

      .header-view {
        padding: 8rpx 0;
        display: flex;
        justify-content: space-between;
      }

      .logo {
        display: flex;
        justify-content: center;
        margin-top: 70rpx;

        .img {
          width: 500rpx;
          height: 100rpx;
        }
      }
    }

    .login-cont {
      width: 100%;

      .login-view {
        background-color: #fff;
        margin: -140rpx 30rpx 30rpx 30rpx;
        border-radius: 20rpx;
        padding: 50rpx 60rpx 80rpx;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        
        .big_title {
          margin-bottom: 70rpx;
        }

        .login-text {
          margin: 50rpx 0;
          color: #82848A;
          font-size: 24rpx;
        }

        .agreement {
          padding: 50rpx 10rpx 0;

          /deep/.u-checkbox {
            display: inline-block;
          }

          .agreement-text {
            font-size: 22rpx;

            .txt {
              // color: $u-type-error;
              color: #FD5B00;
            }
          }
        }
      }
    }

    .login-footer {
      margin-top: 100rpx;
    }

    .policy-content {
      padding: 0 30rpx 20rpx 30rpx;
      box-sizing: border-box;
    }
  }



  .form_icon {
    width: 40rpx;
    margin-right: 40rpx;
  }


  /deep/ .u-form-item {
    background-color: #F8F8F8 !important;
    border-radius: 50rpx !important;
    padding: 6rpx 30rpx 16rpx !important;
    margin-bottom: 50rpx !important;
  }

  .login_type {
    color: #EC6F28;
  }

  .recharge_btn {
    width: 100%;
    height: 100rpx;
    text-align: center;
    color: #fff;
    background-color: #eb6826;
    border-radius: 50rpx;
    font-size: 34rpx;
  
    // background: url(/static/images/login/button.png) no-repeat 0 0;
    // background-size: cover;
  }
</style>